<template>
  <div>
    <div class="lottery hideScrollBar" ref="scrollEl">
      <div class="lottery-bg"></div>
      <!-- 导航 -->
      <div class="navBar">
        <!-- 导航背景 -->
        <!-- :isTransparent="pageData.whiteTheme"
          :whiteTheme="pageData.whiteTheme"
          @getNavBarHeight="(h) => (pageData.navBarHeight = h)"
          @thresholdChange="(val) => (pageData.whiteTheme = !val)" -->
        <NavBar
          isFixed
          isTransparent
          :title="$t('lottery.xybx')"
          :navScorllOffset="60"
          navScorllColor="#FFF"
          :scrollEl="scrollEl"
        />
      </div>
      <!-- 奖池 -->
      <div class="jackpot">
        <!-- 轮播组件 -->
        <div class="jackpot-broadcasts">
          <Broadcast
            v-if="pageData.broadcasts.length > 1"
            :list="pageData.broadcasts"
            :speed="66"
          >
            <template #cell="data">
              <AirdropCell
                v-for="(source, index) in data.list"
                :key="`${data.prefix}-${source.id || index}`"
                :item="source"
              ></AirdropCell>
            </template>
          </Broadcast>
        </div>
        <!-- 奖池文案-翻译 -->
        <!-- <div class="jackpot-title items-center">
          <div class="jackpot-title-text">{{ $t("lottery.jackpot") }}</div>
        </div> -->
        <!-- 奖池金额 -->
        <div class="jackpot-bdc">
          <!-- {{ toThousands(decimalToLength(pageData.jackpotBdc)) }} -->
          <ClientOnly>
            <CountTo
              :startVal="pageData.lastValue"
              :endVal="pageData.jackpotBdc"
              :duration="1500"
            ></CountTo>
          </ClientOnly>
          <span style="font-size: 20px; margin-left: 4px">BDC</span>
        </div>
        <ClientOnly>
          <!-- 奖品 -->
          <div class="jackpot-prize items-center">
            <PrizeSwipe
              v-show="animationState.step == -1"
              @change="swipeEnd"
              @init-done="prizeLoad"
            ></PrizeSwipe>
            <!-- 此处这么写:因为 swiperjs 的 addSlide 函数无法生效,使用el上的方法可以添加但是未知不正确 -->
            <div
              v-show="animationState.step != -1"
              class="jackpot-prize-mysterybox items-center"
              id="removeid"
            >
              <img
                class="jackpot-prize-mysterybox-icon jackpot-prize-mysterybox-start"
                src="/image/lottery/prize-icon.png"
              />
            </div>
          </div>
          <!-- 卡片 -->
          <div v-show="animationState.step == -1" class="jackpot-container">
            <CardSwipe
              @change="changeCardSwipe"
              @init-done="(val) => (animationState.cardSwipe = val)"
            />
          </div>
          <div
            v-show="animationState.step > 0"
            class="jackpot-container items-center"
          >
            <!-- 5 张合成一张 -->
            <div v-if="animationState.step !== 2">
              <div class="jackpot-container-scrollFive">
                <div class="jackpot-container-scrollFive-ul">
                  <div
                    class="jackpot-container-scrollFive-ul-li"
                    v-for="index in 5"
                    :key="index"
                    :style="{
                      width: cellWidth + 'px',
                      left: cellLeft,
                      transform: `scale(${1 - Math.abs(3 - index) * 0.05})`,
                    }"
                    style="margin: 7.5px"
                    :class="[animationState.step === 1 ? `why${index}dh` : '']"
                    @animationend="animationendEnd(1)"
                  >
                    <img
                      style="width: 100%; height: 100%"
                      src="/image/lottery/card-icon.svg"
                    />
                    <span class="jackpot-container-scrollFive-ul-li-bfb">{{
                      getCardText(index)
                    }}</span>
                    <span class="jackpot-container-scrollFive-ul-li-desc">{{
                      t("lottery.jackpot")
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 快速滚动动画 -->
            <div
              v-else-if="animationState.step === 2"
              class="jackpot-container-scroll"
            >
              <div
                class="jackpot-container-scroll-ul"
                :class="{
                  'jackpot-container-scroll-kplb': animationState.step === 2,
                }"
              >
                <div
                  class="jackpot-container-scroll-ul-li"
                  v-for="index in 10"
                  :key="index"
                  :style="{
                    left: cellLeft,
                  }"
                  style="margin: 7.5px"
                >
                  <img
                    style="height: 100%; max-width: none"
                    :style="{ width: cellWidthPx }"
                    src="/image/lottery/card-icon.svg"
                  />
                  <span class="jackpot-container-scroll-ul-li-bfb">{{
                    getCardText(index)
                  }}</span>
                  <span class="jackpot-container-scroll-ul-li-desc">{{
                    t("lottery.jackpot")
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </ClientOnly>
      </div>
      <!-- 抽奖按钮 -->
      <div class="button items-center">
        <!-- BDC 余额 -->
        <div class="button-balance items-center">
          <img
            class="button-balance-icon"
            src="/image/lottery/lottery-ye-left-icon.svg"
          />
          <div class="button-balance-value">
            {{ $t("mvp.assetDetails.text1") }}
            {{ toThousands(decimalToLength(pageData.freeAmount)) }}
          </div>
          <img
            class="button-balance-icon"
            src="/image/lottery/lottery-ye-right-icon.svg"
          />
        </div>
        <!-- 100BDC 抽一次 -->
        <div class="button-box items-center">
          <div
            class="button-btn"
            :class="{
              'button-btn-start': animationState.step === 1,
            }"
            @click.stop="stratAnimation"
          >
            <div class="button-btn-text">
              {{ $t("lottery.cjbtn").replace("100", pageData.costAmount) }}
            </div>
          </div>
          <!-- 抽奖次数 -->
          <div class="button-desc">
            {{ $t("lottery.cjcs") }}
            <span style="color: #007bff">{{ pageData.leftDrawCount }} </span>
          </div>
        </div>
      </div>
      <!-- 抽奖规则 -->
      <div class="rule">
        <!-- 标题 -->
        <div class="rule-title items-center">
          <span class="rule-title-line" style="margin-right: 25px"></span>
          {{ $t("lottery.rule") }}
          <span class="rule-title-line" style="margin-left: 25px"></span>
        </div>
        <!-- 规则内容 -->
        <div class="rule-content">
          <div
            class="items-center"
            style="margin-bottom: 24px; align-items: flex-start"
          >
            <div class="rule-content-num">1</div>
            <div class="rule-content-text">
              {{ $t("lottery.rule1") }}
              <span style="margin-left: 5px; color: #007bff">100,000 BDC</span>
            </div>
          </div>
          <!-- 规则 2 -->
          <div
            class="items-center"
            style="margin-bottom: 24px; align-items: flex-start"
          >
            <div class="rule-content-num">2</div>
            <div class="rule-content-text">
              {{ $t("lottery.rule2") }}
              <span style="margin: 0 5px; color: #007bff">{{
                pageData.totalDrawCount
              }}</span>
              {{ $t("lottery.rule2end") }}
            </div>
          </div>
          <!-- 规则 3 -->
          <div
            class="items-center"
            style="margin-bottom: 24px; align-items: flex-start"
          >
            <div class="rule-content-num">3</div>
            <div class="rule-content-text">
              <span style="color: #007bff">{{ pageData.costAmount }} BDC</span>
              {{ $t("lottery.rule3") }}
            </div>
          </div>
          <!-- 规则 4 -->
          <div>
            <div
              class="items-center"
              style="margin-bottom: 10px; align-items: flex-start"
            >
              <div class="rule-content-num">4</div>
              <div class="rule-content-text">
                {{ $t("lottery.rule4") }}
              </div>
            </div>
            <div
              class="items-center"
              style="justify-content: space-between; margin-bottom: 24px"
            >
              <div class="rule-content-bfb">0.1%</div>
              <div class="rule-content-bfb">0.5%</div>
              <div class="rule-content-bfb">1%</div>
              <div class="rule-content-bfb">3%</div>
              <div class="rule-content-bfb">5%</div>
            </div>
          </div>
          <!-- 规则 5 -->
          <div>
            <div class="items-center" style="align-items: flex-start">
              <div class="rule-content-num">5</div>
              <div class="rule-content-text">
                {{ $t("lottery.rule5") }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 中奖弹窗 -->
    <div
      v-show="animationState.step >= 3"
      class="winning-bg items-center"
      @click.stop=""
    >
      <!-- 百分比 -->
      <template v-if="!animationState.hiddenDone && animationState.step < 6">
        <img
          :class="{ 'winning-card-hidden': animationState.step === 4 }"
          class="winning-gh"
          src="/image/lottery/winning-bg.svg"
        />
        <img
          class="winning-xx winning-xx-xx1"
          src="/image/lottery/winning-xx.svg"
        />
        <img
          class="winning-xx winning-xx-xx2"
          src="/image/lottery/winning-xx.svg"
        />
        <img
          class="winning-xx winning-xx-xx3"
          src="/image/lottery/winning-xx.svg"
        />
        <img
          class="winning-xxbig winning-xxbig-xxbig1"
          src="/image/lottery/winning-xx.svg"
        />
        <img
          class="winning-xxbig winning-xxbig-xxbig2"
          src="/image/lottery/winning-xx.svg"
        />
      </template>
      <!-- 统一的卡片内容 -->
      <div style="position: relative; z-index: 9; perspective: 600px">
        <div
          class="items-center winning-card"
          :class="{
            'winning-card-start': !animationState.hiddenDone,
            'winning-nums-card-start': animationState.step === 4,
            'winning-nums-card': animationState.hiddenDone,
          }"
          @animationend.stop="
            animationendEnd(animationState.step < 5 ? animationState.step : 4)
          "
        >
          <!-- 未中奖 -->
          <div
            v-if="animationState.step === 6"
            class="items-center winning-notwinning"
            style="opacity: 1"
            @click.stop="receivePrize(-1)"
          >
            <div class="winning-notwinning-title">
              {{ $t("lottery.bxfs") }}
            </div>
            <img
              class="winning-notwinning-img"
              src="/image/lottery/popup-box-icon.svg"
            />
            <span class="winning-notwinning-bdc"
              >{{ $t("lottery.xcghy") }}
            </span>
            <div
              class="winning-notwinning-btn"
              style="border-top: 0.4px solid rgba(0, 0, 0, 0.1)"
            >
              <div
                class="winning-notwinning-btn-text items-center"
                @click.stop="receivePrize(-1)"
              >
                <div>{{ $t("common.confirm") }}</div>
              </div>
            </div>
          </div>
          <!-- 中奖 -->
          <template v-else>
            <!-- 显示百分比 -->
            <div
              class="winning-card-box"
              :class="{
                'winning-nums-card-hidden': animationState.step === 4,
              }"
              @animationend.stop="animationState.hiddenDone = true"
              @click.stop="receivePrize"
            >
              <img
                class="winning-card-img"
                src="/image/lottery/card-icon.svg"
              />
              <span
                class="winning-card-text"
                v-if="animationState.step === 3"
                >{{
                  animationState.rafflePoolRate > 0
                    ? `${animationState.rafflePoolRate * 100}%`
                    : "?"
                }}</span
              >
              <span
                v-if="animationState.step === 3"
                class="winning-card-jctext"
                >{{ $t("lottery.jackpot") }}</span
              >
            </div>
            <!-- 中奖 BDC -->
            <div
              class="items-center winning-nums-card-box"
              :class="{
                'winning-nums-card-show': animationState.hiddenDone,
              }"
              @click.stop="receivePrize(-1)"
            >
              <div class="winning-nums-card-title">
                {{ $t("lottery.gxzj") }}
              </div>
              <img
                class="winning-nums-card-gh"
                src="/image/lottery/winning-carg-gh.svg"
              />
              <img
                class="winning-nums-card-img"
                src="/image/lottery/popup-box-icon1.png"
              />
              <span class="winning-nums-card-bdc"
                >{{
                  toThousands(decimalToLength(animationState.acquireAmount))
                }}
                <span class="margin-left:5px">BDC</span>
              </span>
              <div class="winning-nums-card-btn">
                <div class="winning-nums-card-btn-text">
                  {{ $t("common.confirm") }}
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="lottery">
import {
  queryRafflePool,
  queryRaffleInfo,
  sendRaffle,
  getRecentRaffle,
} from "@/api/lottery";
import { useWindowSize, usePageVisibility } from "@vant/use";
import Broadcast from "../../components/info-scroll/index.vue";
import AirdropCell from "../../components/info-scroll/airdrop.vue";

import {
  getOssFileUrl,
  debounce,
  decimalToLength,
  toThousands,
  navigateBack,
  getImagePrefix,
} from "@/utils";
import { useGlobalStore } from "~~/store/global";
// import PrizeSwipe from "~~/components/lottery/prize-swipe.vue";
import { showConfirmDialog } from "vant";
import { useEventBus } from "@vueuse/core";
import * as MITO from "@zhj1214/qdjk-web";

const { t } = useI18n();
const CountTo = defineAsyncComponent(() =>
  import("~/components/countTo/index.vue")
);
const PrizeSwipe = defineAsyncComponent(() =>
  import("~/components/lottery/prize-swipe.vue")
);
const CardSwipe = defineAsyncComponent(() =>
  import("~/components/lottery/card-swipe.vue")
);

// 全局提示
const showToastEmit = useEventBus("showToast-emit");

// 获取窗口宽度和高度
const { width, height } = process.client
  ? useWindowSize()
  : { width: ref(320), height: ref(667) };

const scrollEl = ref();
const prizeSwipeRef = ref();
// const route = useRoute();
// console.log("页面参数:", route.query);

const imgUrl = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

const globalStore = useGlobalStore();
// 如果没有登录-直接跳转登录页面
if (!globalStore.$state.token && process.client) {
  bridge.onAppLogin();
}

// firebase埋点
// const firebase = useInitFirebase(); // 初始化firebase
// firebase?.logEvent('BDC_H5_FAQJump');

// 页面属性
const pageData = reactive({
  whiteTheme: true,
  navBarHeight: 0,
  broadcasts: [],
  jackpotBdc: 0, // 奖池数量
  lastValue: 0,
  refreshTime: 0, // 下一次刷新时间
  costAmount: 0, // 每次抽奖消耗的 BDC 数量
  freeAmount: 0, // 账户可用BDC
  freeAmountNew: 0, // 账户可用BDC,接口返回的最新值
  totalDrawCount: 0, // 总共可抽奖次数
  leftDrawCount: 0, // 剩余抽奖次数
});

// 是否都请求结束
// const isRequestEnd = computed(() => {
//   if (Number(pageData.jackpotBdc) && Number(pageData.jackpotBdc) > 0) {
//     if (Number(pageData.freeAmount) && Number(pageData.freeAmount) > 0) {
//       if (pageData.totalDrawCount && pageData.totalDrawCount > 0) {
//         return true;
//       }
//     }
//   }
//   return false;
// });
// 是否可以~抽奖
// const isLottery = computed(() => {
//   if (!Number(pageData.jackpotBdc) || Number(pageData.jackpotBdc) < 1) {
//     return false;
//   } else if (!Number(pageData.costAmount) || Number(pageData.costAmount) < 1) {
//     return false;
//   } else if (!Number(pageData.freeAmount) || Number(pageData.freeAmount) < 1) {
//     return false;
//   } else if (Number(pageData.freeAmount) < Number(pageData.costAmount)) {
//     return false;
//   } else if (!pageData.totalDrawCount || pageData.totalDrawCount < 1) {
//     return false;
//   } else if (!pageData.leftDrawCount || pageData.leftDrawCount < 1) {
//     return false;
//   }
//   return true;
// });

/**************** start 动画 start ****************/
// 卡片宽度
const cellWidth = computed(() => {
  return (width.value - 15 * 4) / 4;
});
// 卡片宽度px
const cellWidthPx = computed(() => {
  return `${(width.value - 15 * 4) / 4}px`;
});
// 向左边移动半个卡片
const cellLeft = computed(() => {
  return `-${cellWidth.value * 0.6}px`;
});
/**
 * 开始抽奖/动画 step 1. 五合一 2. 卡片轮播 3. 卡片中奖
 * 等待请求结果,如果没有结果step2就一直转,请求失败就重置状态step=-1
 * */
const prefixImg = process.env.NODE_ENV != "development" ? "/fx" : "";

const animationState = reactive({
  step: -1,
  step3Done: false, // 动画 3 完成才能点击卡片进行翻转
  hiddenDone: false, // 翻转 180 动画是否完成
  raffleStatus: -1,
  acquireAmount: 0,
  rafflePoolRate: 0,
  // 卡片
  cardSwipe: null,
});
let lastPrizeIdx = 997;
let lastCardIdx = 997;

// 动画结束
const animationendEnd = (index) => {
  // console.log(`第${index}步完成`);
  // if (index == 2) return;
  if (animationState.step === 3) {
    animationState.step3Done = true;
    if (animationState.raffleStatus == 0) {
      animationState.step = 6;
    } else {
      setTimeout(() => {
        receivePrize();
      }, 500);
    }
  } else {
    const next = index + 1;
    if (animationState.step != next) animationState.step = next;
  }
};
// 动画状态重置
const animationReset = async () => {
  animationState.step = -1;
  animationState.hiddenDone = false;
  animationState.step3Done = false;

  await nextTick(() => {
    if (!prizeSwipeRef.value || !animationState.cardSwipe) {
      showToastEmit.emit("common.wlycqcxjr");
      MITO.log({
        message: `抽奖 ${
          !prizeSwipeRef.value
            ? "prizeSwipeRef"
            : !animationState.cardSwipe
            ? "cardSwipe"
            : "未知错误"
        } 实例不存在`,
        tag: "手动上报",
        level: "high",
        ex: "手动上报",
      });
    } else {
      prizeSwipeRef.value.slideTo(997);
      animationState.cardSwipe.slideTo(997, 500, false); //切换到第一个slide，速度为500 毫秒
    }
  });
};
// 领奖
const receivePrize = debounce(
  (val) => {
    // 点几了百分比,开始翻转动画
    if (
      animationState.raffleStatus > 0 &&
      animationState.step === 3 &&
      val != -1
    ) {
      if (animationState.step3Done) {
        if (animationState.hiddenDone == false) {
          animationState.step = 4; // 翻转
        } else {
          if (animationState.hiddenDone) animationReset();
        }
      }
    }
    // 重置状态,关闭弹窗
    else if (val === -1 && animationState.step > 3) {
      if (animationState.step3Done) animationReset();
      if (Number(pageData.freeAmountNew) != Number(pageData.freeAmount)) {
        pageData.freeAmount = pageData.freeAmountNew; // 账户可用 bdc,要等弹窗按钮点击之后,在展示变化
      }
    }
  },
  1000,
  true
);
const getCardText = (val) => {
  if (val == 1) {
    return "1%";
  } else if (val == 2) {
    return "3%";
  } else if (val == 3) {
    return "5%";
  } else if (val == 4) {
    return "0.1%";
  } else if (val == 5) {
    return "0.5%";
  }
  return "0.5%";
};

// 抽奖
const stratAnimation = debounce(
  async () => {
    if (animationState.step > 0) return;
    // if (!isLottery.value) {
    if (
      !Number(pageData.freeAmount) ||
      Number(pageData.freeAmount) < Number(pageData.costAmount)
    ) {
      showToastEmit.emit("lottery.yebz");
      return;
    } else if (!pageData.leftDrawCount || pageData.leftDrawCount < 1) {
      showToastEmit.emit("lottery.cjcsbz");
      return;
    }

    // }
    // 1. 开始动画
    animationState.step = 1;
    const now = Date.now();
    try {
      const res = await sendRaffle();
      // console.log("--res--", res);

      // const res = {
      //   raffleStatus: 0,
      //   acquireAmount: 100,
      //   rafflePoolRate: 0.01,
      //   freeAmount: 555,
      //   leftDrawCount: 8,
      //   raffleTotalAmount: 951248,
      // };
      const end = Date.now();
      if (res && res.raffleStatus != undefined) {
        animationState.raffleStatus = res.raffleStatus; // 抽奖状态 0:未中奖 1:中奖
        if (animationState.raffleStatus == 0) {
          animationState.rafflePoolRate = 0; // 中奖 百分比
        } else {
          animationState.acquireAmount = res.acquireAmount; // 中奖的 bdc
          animationState.rafflePoolRate = res.rafflePoolRate; // 中奖 百分比 0.01 => 1%
        }
        // pageData.freeAmount = res.freeAmount; // 账户可用 bdc,要等弹窗按钮点击之后,在展示变化
        pageData.freeAmountNew = res.freeAmount; // 账户可用 bdc,要等弹窗按钮点击之后,在展示变化
        pageData.leftDrawCount = res.leftDrawCount; // 剩余抽奖次数
        pageData.jackpotBdc = Number(res.raffleTotalAmount); // 奖池数量
        setTimeout(() => {
          pageData.lastValue = Number(res.raffleTotalAmount); // 备份
        }, 3000);

        // 什么时机~开奖
        if ((end - now) / 1000 > 1.8) {
          animationendEnd(2);
        } else {
          setTimeout(() => {
            animationendEnd(2);
          }, 1800 - (end - now) / 1000);
        }
        // 奖品 icon
        // animationState.prizeIcon = `${prefixImg}/image/lottery/popup-box-icon${
        //   animationState.rafflePoolRate * 1000
        // }.png`;
      } else {
        animationReset();
      }
    } catch (error) {
      animationReset();
      showConfirmDialog({
        title: `${t("mvp.other.wxts")}`,
        message: t("common.wlycqcxjr"),
        confirmButtonText: t("mvp.other.zdl"),
        showCancelButton: false,
      }).then(() => {
        navigateBack();
      });
    }
  },
  500,
  false
);
/**************** end 动画 end ****************/
/**
 * @description: 获取轮播信息
 */
const getRecentRaffleRequest = () => {
  getRecentRaffle().then((res) => {
    if (res) {
      // 赋值,并消除头像加载失败问题
      pageData.broadcasts = res.map((e) => {
        if (!e.avatar || e.avatar == "https://asset.onetrader.online/") {
          e.avatar = imgUrl.avatarDefault;
        } else {
          e.avatar = getImagePrefix() + e.avatar;
        }
        return e;
      });
    }
  });
};
/**
 * @description: 获取奖池BDC数量
 */
const queryRafflePoolRequest = () => {
  queryRafflePool()
    .then((res) => {
      // console.log("奖池数量", res);
      if (res) {
        pageData.refreshTime = res.nextRefreshTime;
        pageData.jackpotBdc = Number(res.raffleTotalAmount);
        setTimeout(() => {
          pageData.lastValue = Number(res.raffleTotalAmount); // 备份
        }, 3000);
      } else {
        if (timeInterval) {
          clearTimeout(timeInterval);
          timeInterval = null;
        }
      }
    })
    .catch(() => {
      if (timeInterval) {
        clearTimeout(timeInterval);
        timeInterval = null;
      }
    });
};
/**
 * @description: 抽奖次数
 */
const queryRaffleInfoRequest = () => {
  queryRaffleInfo().then((res) => {
    if (res) {
      pageData.costAmount = res.costAmount;
      pageData.freeAmount = res.freeAmount;
      pageData.totalDrawCount = res.totalDrawCount || 0;
      pageData.leftDrawCount = res.leftDrawCount || 0;
    }
  });
};

// 从后台进入更新奖池数据
const pageVisibility = usePageVisibility();
watch(pageVisibility, (value) => {
  if (value == "visible") queryRafflePoolRequest();
});

// 生命周期
let timeInterval;
const preventTouch = (event) => {
  event.preventDefault();
};
let container = null;
onMounted(() => {
  // 1. 更新奖池BDC,
  timeInterval = setInterval(() => {
    if (Number(pageData.refreshTime) > 0) {
      if (Date.now() > Number(pageData.refreshTime) + 3 * 1000) {
        queryRafflePoolRequest(); // 延迟 3 秒更新
      }
    } else {
      queryRafflePoolRequest();
    }
  }, 1000);
  // 2. 获取获奖动态
  getRecentRaffleRequest();
  // 3. 获取抽奖次数
  queryRaffleInfoRequest();
  // 4.添加触摸事件监听器
  // 获取容器元素
  container = document.querySelector(".winning-bg");
  setTimeout(() => {
    if (container) {
      container.addEventListener("touchmove", preventTouch, { passive: false });
    }
  }, 1000);
});

// 移除触摸事件监听器
onBeforeUnmount(() => {
  if (container) {
    container.removeEventListener("touchmove", preventTouch);
  }
});

onUnmounted(() => {
  if (timeInterval) {
    clearTimeout(timeInterval);
    timeInterval = null;
  }
});
//
const prizeLoad = (val) => {
  prizeSwipeRef.value = val;
  // 此处是为了解决:prizeSwipe组件第一次加载的时候不显示当前元素
  setTimeout(() => {
    prizeSwipeRef.value.slideTo(997);
  }, 500);
};
// 奖品滑动结束
const swipeEnd = (val) => {
  // console.log(animationState.cardSwipe, "--奖品--索引:", val);
  if (animationState.cardSwipe && lastPrizeIdx != val) {
    animationState.cardSwipe.slideTo(val, 500, false); //切换到第一个slide，速度为1秒
  }
  lastPrizeIdx = val;
};
// 卡片滚动
const changeCardSwipe = (val) => {
  // console.log(prizeSwipeRef.value, lastCardIdx, "--卡片--索引:", val);
  if (prizeSwipeRef.value && lastCardIdx != val) {
    prizeSwipeRef.value.slideTo(val);
  }
  lastCardIdx = val;
};
</script>
<style lang="scss" scoped>
.lottery {
  position: relative;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
  padding-bottom: 33 * 2px;
  background-color: #f0f3fa;

  &-bg {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100vw;
    height: 344 * 2px;
    background: linear-gradient(
      182deg,
      #4da3ff 0.63%,
      rgba(255, 236, 249, 0) 98.36%
    );

    background-size: 100vw 344 * 2px;
    background-repeat: no-repeat;
  }

  .navBar {
    position: relative;
    &-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
    }
  }
  .jackpot {
    z-index: 1;
    position: relative;
    min-height: 454 * 2px;
    padding-bottom: 20 * 2px;
    overflow: hidden;

    background-image: url("/image/lottery/jackpot-bg-img.png");

    background-position: 0 72px;
    background-repeat: no-repeat;
    background-size: 100%;
    &-broadcasts {
      margin-top: 10 * 2px;
      height: 24 * 2px !important;
    }

    &-bdc {
      margin-top: 48 * 2px;
      color: #007bff;
      text-align: center;
      // text-shadow: -2px -2px 2px #fcffc7, 2px 2px 2px #fcffc7,
      //   2px -2px 2px #fcffc7, -2px 2px 2px #fcffc7;
      font-size: 30 * 2px;
      font-weight: 700;
      line-height: 30px; /* 100% */
      letter-spacing: 0.8px;
    }
    &-prize {
      position: relative;
      justify-content: center;
      margin-top: 22.5 * 2px;
      &-swipe {
        width: 100vw;
        &-item {
          height: 180 * 2px;
          justify-content: center;
          &-icon {
            width: 180 * 2px;
            height: 180 * 2px;
          }
          &-start {
            @keyframes shakeimg {
              0% {
                transform: rotateZ(0deg);
              }
              25% {
                transform: rotateZ(15deg);
              }
              50% {
                transform: rotateZ(-15deg);
              }
              75% {
                transform: rotateZ(15deg);
              }
              100% {
                transform: rotateZ(0deg);
              }
            }
            animation: shakeimg 0.4s ease-in-out 4;
          }
        }
      }
      &-box {
        @keyframes leftoffset {
          0% {
            left: 0;
          }
          100% {
            left: calc(-100vw - 90px);
          }
        }
        position: relative;
        width: 100vw;
        justify-content: flex-start;

        &-start {
          animation: leftoffset 1s linear 1;
          animation-fill-mode: forwards;
        }
        &-cur {
          margin-right: 100vw;
          margin-left: 50vw;
          transform: translate(-50%, 0);

          width: 180 * 2px;
          height: 180 * 2px;
        }
        &-next {
          transform: translate(-100%, 0);
          width: 180 * 2px;
          height: 180 * 2px;
          &-start {
            @keyframes shake {
              0% {
                transform: translate(-100%, 0) rotateZ(0deg);
              }
              25% {
                transform: translate(-100%, 0) rotateZ(15deg);
              }
              50% {
                transform: translate(-100%, 0) rotateZ(-15deg);
              }
              75% {
                transform: translate(-100%, 0) rotateZ(15deg);
              }
              100% {
                transform: translate(-100%, 0) rotateZ(0deg);
              }
            }
            animation: shake 0.4s ease-in-out 4;
          }
        }
      }
      &-mysterybox {
        justify-content: center;
        height: 130 * 2px;
        &-icon {
          width: 130 * 2px;
          height: 130 * 2px;
        }
        &-start {
          @keyframes shakeimg {
            0% {
              transform: rotateZ(0deg);
            }
            25% {
              transform: rotateZ(15deg);
            }
            50% {
              transform: rotateZ(-15deg);
            }
            75% {
              transform: rotateZ(15deg);
            }
            100% {
              transform: rotateZ(0deg);
            }
          }
          animation: shakeimg 0.4s ease-in-out 4;
        }
      }
    }
    &-container {
      margin-top: 113 * 2px;
      width: 100vw;
      justify-content: center;
      flex-direction: column;

      &-scrollFive {
        width: 100vw;
        // height: 120 * 2px;
        overflow: hidden;
        display: flex;

        .why1dh {
          @keyframes why1dh {
            from {
              transform: scale(1);
              left: v-bind("cellLeft");
            }
            to {
              transform: scale(1);
              left: calc(
                v-bind(cellWidthPx) + v-bind(cellWidthPx) + 15 * 2px +
                  v-bind(cellLeft)
              );
            }
          }
          animation: why1dh 0.5s linear 2;
          animation-direction: alternate;
        }
        .why2dh {
          @keyframes why2dh {
            from {
              transform: scale(1);
              left: v-bind(cellLeft);
            }
            to {
              transform: scale(1);
              left: calc(v-bind(cellWidthPx) + 15px + v-bind(cellLeft));
            }
          }
          animation: why2dh 0.5s linear 2;
          animation-direction: alternate;
        }
        .why4dh {
          @keyframes why4dh {
            from {
              transform: scale(1);
              left: v-bind(cellLeft);
            }
            to {
              transform: scale(1);
              left: calc(0px - v-bind(cellWidthPx) - 15px + v-bind(cellLeft));
            }
          }
          animation: why4dh 0.5s linear 2;
          animation-direction: alternate;
        }
        .why5dh {
          @keyframes why5dh {
            from {
              transform: scale(1);
              left: v-bind("cellLeft");
            }
            to {
              transform: scale(1);
              left: calc(
                0px - v-bind(cellWidthPx) - v-bind(cellWidthPx) - 15 * 2px +
                  v-bind(cellLeft)
              );
            }
          }
          animation: why5dh 0.5s linear 2;
          animation-direction: alternate;
        }

        &-ul {
          display: flex;
          align-items: center;
          &-li {
            display: block;
            position: relative;
            &-bfb {
              position: absolute;
              top: 30 * 2px;
              left: 0px;
              width: 44 * 2px;
              text-align: center;
              transform: translate(50%, 0);
              color: #007bff;
              font-size: 13 * 2px;
              font-weight: 700;
            }
            &-desc {
              position: absolute;
              top: 80 * 2px;
              left: 50%;
              width: 90 * 2px;
              text-align: center;
              transform: translate(-50%, 0);
              color: #fff1a9;
              font-size: 11 * 2px;
              font-weight: 590;
            }
          }
        }
      }
      &-scroll {
        width: 100vw;
        overflow: hidden;
        @keyframes myScroll {
          from {
            left: v-bind(cellLeft); // 露半个卡片
          }
          to {
            left: calc(
              100vw - v-bind(cellWidth) * 8px - 15 * 8px + v-bind(cellLeft)
            );
          }
        }
        &-kplb {
          animation: myScroll 0.2s ease-in-out infinite;
        }
        &-ul {
          display: flex;
          position: relative;
          &-li {
            position: relative;
            &-bfb {
              position: absolute;
              top: 30 * 2px;
              left: 0px;
              width: 44 * 2px;
              text-align: center;
              transform: translate(50%, 0);
              color: #007bff;
              font-size: 13 * 2px;
              font-weight: 700;
            }
            &-desc {
              position: absolute;
              top: 80 * 2px;
              left: 50%;
              width: 90 * 2px;
              text-align: center;
              transform: translate(-50%, 0);
              color: #fff1a9;
              font-size: 11 * 2px;
              font-weight: 590;
            }
          }
        }
      }
    }
  }
  .button {
    position: relative;
    height: 188 * 2px;
    justify-content: center;
    flex-direction: column;

    &-balance {
      position: relative;
      z-index: 1;
      margin-top: 17 * 2px;
      

      &-value {
        color: #007bff;
        font-size: 15 * 2px;
        font-weight: 590;
        height: 30 * 2px;
        background-color: #c7e1ff;
        line-height: 30 * 2px;
      }
      &-icon {
        width: 18 * 2px;
        height: 30 * 2px;
      }
    }
    &-box {
      flex-direction: column;
      width: 363 * 2px;
      height: 144 * 2px;
      border-radius: 12 * 2px;
      background-color: #fff;
    }
    &-btn {
      z-index: 1;
      height: 75 * 2px;
      width: 300 * 2px;
      margin-top: 15 * 2px;
      margin-bottom: 15 * 2px;
      background-image: url("/image/lottery/button-btn.svg");
      background-repeat: no-repeat;
      background-size: 100%;
      
      &-text {
        // font-feature-settings: "clig" off, "liga" off;
        // text-shadow: 0px 6px 0px #9d0b8b;
        color: #fdffaa;
        font-size: 24 * 2px;
        text-align: center;
        line-height: 55 * 2px;
        font-weight: 700;
      }

      &-disabled {
        background-image: url("/image/lottery/btn-disabled.svg") !important;
      }
      &-start {
        @keyframes btnscale {
          0% {
            transform: scale(1);
          }
          25% {
            transform: scale(1.05);
          }
          50% {
            transform: scale(0.95);
          }
          75% {
            transform: scale(1.05);
          }
          100% {
            transform: scale(1);
          }
        }
        animation: btnscale 0.6s ease-in-out;
      }
    }
    &-desc {
      z-index: 1;
      color: #002853;
      font-size: 13 * 2px;
      margin-bottom: 25 * 2px;
    }
  }
  .rule {
    position: relative;
    padding-top: 70 * 2px;
    &-title {
      width: 100vw;
      justify-content: center;
      position: absolute;
      top: 30 * 2px;
      left: 0;
      color: #007bff;
      font-size: 15 * 2px;
      font-weight: 590;
      &-line {
        flex: 1;
        width: calc(50vw - 25 * 2px);
        height: 1px;
        background-color: rgba(0, 123, 255, 0.3);
      }
    }
    &-content {
      margin: 0 15 * 2px;
      padding: 20 * 2px 12 * 2px;
      background-color: #fff;
      border-radius: 12 * 2px;
      &-num {
        margin-top: 6 * 2px;
        height: 12 * 2px;
        width: 12 * 2px;
        margin-right: 10 * 2px;
        color: #007bff;
        font-size: 15 * 2px;
        font-style: italic;
        font-weight: 590;
        border-radius: 12px;
        line-height: 2 * 2px; /* 133.333% */
        text-align: center;
      }
      &-text {
        color: #999da7;
        font-size: 13 * 2px;
      }
      &-bfb {
        text-align: center;
        color: #007bff;
        font-size: 15 * 2px;
        font-weight: 590;
        width: 54 * 2px;
        height: 54 * 2px;
        line-height: 52 * 2px;
        border-radius: 12 * 2px;
        border: 1px solid #c0deff;
        background: #fff;
      }
    }
  }
}

.winning {
  position: relative;
  touch-action: none;
  &-bg {
    width: 100vw;
    height: 100vh;
    position: fixed;
    touch-action: none;
    top: 0;
    left: 0;
    z-index: 999;
    justify-content: center;
    background: rgba(0, 0, 0, 40%);
  }
  &-gh {
    @keyframes rotate {
      0% {
        z-index: 1;
        transform: rotateZ(0) scale(1.1);
      }
      100% {
        z-index: 1;
        transform: rotateZ(980deg) scale(1.1);
      }
    }
    z-index: 1;
    width: 100vw;
    height: 440 * 2px;
    position: absolute;
    top: 22%;
    animation: rotate 1.5s ease-in-out 1;
  }
  &-xx {
    @keyframes flicker {
      0% {
        transform: scale(0.5) rotateZ(0);
      }
      25% {
        transform: scale(2) rotateZ(180deg);
      }
      50% {
        transform: scale(0.5) rotateZ(0);
      }
      75% {
        transform: scale(2) rotateZ(180deg);
      }
      100% {
        transform: scale(1) rotateZ(0);
        // transform: scale(4) rotateZ(180deg);
      }
    }
    width: 25px;
    height: 25px;
    position: absolute;
    animation: flicker 0.5s 2.5 ease-in-out;
    z-index: 999;
    &-xx1 {
      top: 25vh;
      left: 4vw;
    }
    &-xx2 {
      top: 33vh;
      right: 5vw;
    }
    &-xx3 {
      top: 43vh;
      left: 12vw;
    }
  }
  &-xxbig {
    @keyframes flickerbig {
      0% {
        transform: scale(0.5) rotateZ(0);
      }

      50% {
        transform: scale(2) rotateZ(180deg);
      }

      100% {
        transform: scale(1) rotateZ(0);
      }
    }
    &-xxbig1 {
      top: 18.5vh;
      right: 34vw;
    }
    &-xxbig2 {
      top: 55vh;
      right: 9vw;
    }
    width: 25 * 2px;
    height: 25 * 2px;
    position: absolute;

    animation: flickerbig 0.8s 2 ease-in-out;
    z-index: 999;
  }
  &-card {
    justify-content: center;
    position: relative;
    z-index: 9;
    top: -10 * 2px;
    width: 234px;
    height: 288px;
    &-box {
      position: absolute;
      top: 0;
      // z-index: 9;
      width: 100%;
      height: 100%;
    }
    &-img {
      width: 100%;
      height: 100%;
    }
    &-start {
      @keyframes scaleAndFlip {
        0% {
          transform: scale(0.5) rotateY(0deg);
        }
        15% {
          transform: scale(1) rotateY(90deg);
        }
        30% {
          transform: scale(2) rotateY(360deg);
        }
        60% {
          transform: scale(2) rotateY(0deg);
        }
        80% {
          transform: scale(2) rotateY(270deg);
        }
        100% {
          transform: scale(2) rotateY(0deg);
        }
      }

      animation: scaleAndFlip 1.5s ease-in-out 1;
      animation-fill-mode: forwards;
    }
    &-text {
      position: absolute;
      top: 88px;
      left: 120px;
      transform: translate(-50%, 0);
      color: #007bff;
      font-size: 24px;
      font-weight: 700;
    }
    &-jctext {
      z-index: 99999;
      position: absolute;
      top: 213px;
      min-width: 107 * 2px;
      text-align: center;
      text-wrap: nowrap;
      white-space: nowrap;
      left: 115px;
      transform: translate(-50%, 0);
      color: #fff1a9;
      font-size: 24px;
      font-weight: 700;
    }
    &-hidden {
      @keyframes hidden1 {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }
      animation: hidden1 0.8s ease-in-out 1;
      animation-fill-mode: forwards;
    }
  }
  &-nums {
    position: relative;

    &-card {
      width: 295 * 2px;
      height: 305 * 2px;
      &-box {
        width: 295 * 2px;
        height: 305 * 2px;
        position: absolute;
        top: 0;
        z-index: 999999;
        opacity: 0;
        background: linear-gradient(180deg, #e2f0ff 0%, #fff 100%);
        border-radius: 12 * 2px;
        justify-content: center;
        flex-direction: column;
        transform: rotateY(0deg) !important;
      }
      &-title {
        width: 95%;
        padding: 3 * 2px 0;
        margin-bottom: 20 * 2px;
        color: #fcffc7;
        text-align: center;
        font-size: 17 * 2px;
        font-weight: 590;
        background-image: url("/image/airdrop/popup-title-blue-icon.svg") !important;
        background-repeat: no-repeat;
        background-size: 100%;
      }
      &-gh {
        position: absolute;
        top: 105px;
        left: 50%;
        transform: translate(-50%, 0);
        height: 140 * 2px;
        // @keyframes rotate {
        //   0% {
        //     transform: rotateZ(0);
        //   }
        //   100% {
        //     transform: rotateZ(720deg);
        //   }
        // }
        // animation: rotate 5s infinite linear;
      }
      &-img {
        position: relative;
        z-index: 2;
        // width: 240 * 2px;
        height: 110 * 2px;
        margin-bottom: 10 * 2px;
      }
      &-bdc {
        padding: 4 * 2px 10 * 2px;
        border-radius: 100px;
        border: 1px solid #fff;
        background: #d8ebff;
        color: #007bff;
        font-size: 17 * 2px;
        font-weight: 590;
        margin-bottom: 10 * 2px;
      }
      &-btn {
        width: 100%;
        padding: 18 * 2px 15 * 2px 0 * 2px 15 * 2px;
        padding-bottom: 0;
        border-top: 1px solid rgba(0, 0, 0, 10%);
        &-text {
          border-radius: 6 * 2px;
          width: 265 * 2px;
          height: 36 * 2px;
          line-height: 36 * 2px;
          text-align: center;
          font-size: 15 * 2px;
          font-weight: 590;
          color: #fff;
          background-color: #007bff;
        }
      }
      &-start {
        @keyframes overturn {
          from {
            width: 234px;
            height: 288px;
            transform: rotateY(180deg);
          }
          to {
            width: 295px;
            height: 305px;
            transform: rotateY(0deg);
          }
        }
        animation: overturn 1.5s ease-in-out 1;
        animation-fill-mode: forwards;
      }
      &-show {
        @keyframes showview {
          from {
            opacity: 0;
            transform: rotateY(90deg);
          }
          to {
            opacity: 1;
            transform: rotateY(0deg);
          }
        }
        animation: showview 0.8s ease-in-out 1;
        animation-fill-mode: forwards;
        z-index: 999999;
      }
      &-hidden {
        @keyframes hiddenview {
          from {
            transform: rotateY(0deg);
          }
          to {
            transform: rotateY(90deg);
          }
        }
        animation: hiddenview 0.8s ease-in-out 1;
        animation-fill-mode: forwards;
      }
    }
  }
  &-notwinning {
    position: relative;
    z-index: 9;
    width: 295px;
    min-height: 305px;
    background: linear-gradient(180deg, #e2f0ff 0%, #fff 100%);
    border-radius: 6 * 2px;
    justify-content: center;
    flex-direction: column;
    &-title {
      margin: 15px 0;
      padding: 0 15px;
      width: 100%;
      color: #141924;
      text-align: center;
      font-size: 17px;
      font-weight: 590;
    }
    &-img {
      // width: 240px;
      height: 110px;
      margin-bottom: 5px;
    }
    &-bdc {
      padding: 4px 10px;
      border-radius: 100px;
      border: 1px solid #fff;
      background: #d8ebff;
      color: #007bff;
      font-size: 15px;
      font-weight: 590;
      margin-bottom: 15px;
      text-align: center;
    }
    &-btn {
      position: relative;
      z-index: 9999;
      width: 100%;
      padding: 11px 15px;
      &-text {
        justify-content: center;
        border-radius: 6px;
        width: 265px;
        height: 36px;
        text-align: center;

        text-align: center;
        font-size: 15px;
        font-weight: 590;
        color: #fff;
        background-color: #007bff;
      }
    }
  }
}
</style>
